<template>
    <div @click="isShow = !isShow"
        class="w-fit h-8 px-1 rounded-full bg-[var(--inputBg)] flex justify-center items-center cursor-pointer">
        <img class="w-7 h-7 rounded-full mr-1" :src="userInfo?.avatarUrl" alt="">
        <span class="text-[var(--text)] text-xs">{{ userInfo?.nickname }}</span>
        <span class="text-xs text-[--iconBg] text-[10px] ml-1">&#9660</span>
    </div>
    <div v-if="isShow"
        class="w-72 shadow-lg flex flex-col py-3 items-center bg-[var(--active)] rounded-lg fixed top-16 left-2/3 translate-x-[-50%] z-50">
        <!-- 动态、关注、粉丝 -->
        <div class="flex justify-between px-5 w-[90%] h-fit">
            <div class="text-center">
                <h3 class="text-[var(--text)] text-lg font-bold">{{ userInfo.eventCount }}</h3>
                <p class="text-[var(--iconBg)] text-sm">动态</p>
            </div>
            <div class="text-center">
                <h3 class="text-[var(--text)] text-lg font-bold">{{ userInfo.follows }}</h3>
                <p class="text-[var(--iconBg)] text-sm">关注</p>
            </div>
            <div class="text-center">
                <h3 class="text-[var(--text)] text-lg font-bold">{{ userInfo.followeds }}</h3>
                <p class="text-[var(--iconBg)] text-sm">粉丝</p>
            </div>
        </div>
        <!-- 签到 -->
        <div class="border-b border-[var(--hoverBg)] w-full flex justify-center py-3">
            <el-button type="info" round :icon="Coin">
                <span class="text-[var(--iconBg)]">签到</span>
            </el-button>
        </div>
        <!-- 信息列表 -->
        <ul class="w-full border-b border-[var(--hoverBg)]">
            <li
                class="flex justify-between items-center cursor-pointer py-2 hover:bg-[var(--hoverBg)] duration-300 px-4">
                <div>
                    <el-icon class="align-middle mb-[1px] mr-1">
                        <TrophyBase />
                    </el-icon>
                    <span class="text-sm text-[var(--text)]">会员中心</span>
                </div>
                <p class="text-xs text-[var(--text)]">未订购 <span class="text-slate-400">&gt;</span></p>
            </li>
            <li
                class="flex justify-between items-center cursor-pointer py-2 hover:bg-[var(--hoverBg)] duration-300 px-4">
                <div>
                    <el-icon class="align-middle mb-[1px] mr-1">
                        <Medal />
                    </el-icon>
                    <span class="text-sm text-[var(--text)]">等级</span>
                </div>
                <p class="text-xs text-slate-500">Lv.7 <span class="text-slate-400">&gt;</span></p>
            </li>
            <li
                class="flex justify-between items-center cursor-pointer py-2 hover:bg-[var(--hoverBg)] duration-300 px-4">
                <div>
                    <el-icon class="align-middle mb-[1px] mr-1">
                        <Goods />
                    </el-icon>
                    <span class="text-sm text-[var(--text)]">商城</span>
                </div>
                <span class="text-slate-400 text-xs">&gt;</span>
            </li>
        </ul>
        <ul class="w-full border-b border-[var(--hoverBg)]">
            <li
                class="flex justify-between items-center cursor-pointer py-2 hover:bg-[var(--hoverBg)] duration-300 px-4">
                <div>
                    <el-icon class="align-middle mb-[1px] mr-1">
                        <User />
                    </el-icon>
                    <span class="text-sm text-[var(--text)]">个人信息设置</span>
                </div>
                <span class="text-slate-400 text-xs">&gt;</span>
            </li>
            <li
                class="flex justify-between items-center cursor-pointer py-2 hover:bg-[var(--hoverBg)] duration-300 px-4">
                <div>
                    <el-icon class="align-middle mb-[1px] mr-1">
                        <Link />
                    </el-icon>
                    <span class="text-sm text-[var(--text)]">绑定社交账号</span>
                </div>
                <span class=" iconfont icon-xinlang before:text-[var(--iconBg)]"></span>
            </li>
        </ul>
        <ul class="w-full border-b border-[var(--hoverBg)]">
            <li
                class="flex justify-between items-center cursor-pointer py-2 hover:bg-[var(--hoverBg)] duration-300 px-4">
                <div>
                    <el-icon class="align-middle mb-[1px] mr-1">
                        <Service />
                    </el-icon>
                    <span class="text-sm text-[var(--text)]">我的客服</span>
                </div>
                <span class="text-slate-400 text-xs">&gt;</span>
            </li>
        </ul>
        <ul class="w-full">
            <li @click="loginOut"
                class="flex justify-between items-center cursor-pointer py-2 hover:bg-[var(--hoverBg)] duration-300 px-4">
                <div>
                    <el-icon class="align-middle mb-[1px] mr-1">
                        <SwitchButton />
                    </el-icon>
                    <span class="text-sm text-[var(--text)]">退出</span>
                </div>
                <span class="text-slate-400 text-xs">&gt;</span>
            </li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
import { ref, getCurrentInstance } from 'vue'
import { Coin, TrophyBase, Medal, Goods, User, Link, Service, SwitchButton } from '@element-plus/icons-vue'
import type { profileType } from '@renderer/store/modules/login/type'
const { ipcRenderer } = require('electron')
import { ElMessage } from "element-plus"
// 指定this
const ctx = getCurrentInstance()
const bus = ctx?.appContext.config.globalProperties.$bus
const isShow = ref<boolean>(false)
// 用户信息
const userInfo = ref<profileType>(JSON.parse(localStorage.getItem("user") as string))
// 退出登录
const loginOut = async () => {
    let keysToRemove = ["user", "token&cookie"];
    await ipcRenderer.invoke('logout')
    ElMessage.success('退出成功')
    keysToRemove.forEach(k => localStorage.removeItem(k))
    bus.emit('loginOut')
}
</script>
<style scoped lang='less'>
:deep(.el-button) {
    background: transparent;

    &:hover {
        background-color: rgba(184, 181, 185, 0.1);
    }
}

div:nth-child(1) {
    -webkit-app-region: no-drag;
}
</style>